<template>
    <!-- 如果主应用也有基础路径，那么 baseroute = 主应用基础路径 + '/child' -->
    <micro-app
        v-if="currentMicroAppConfig"
        style="width: 100%"
        :name="currentMicroAppConfig.name"
        :url="currentMicroAppConfig.url"
        :iframe="currentMicroAppConfig.iframe"
        :baseroute="currentMicroAppConfig.baseroute"
        @mounted="onMicroAppMounted"
        @unmount="onMicroAppUnmount"
    ></micro-app>
</template>

<script setup lang="ts">
// import microAppObj from '@micro-zoe/micro-app'
import config from '@/config'
const route = useRoute()
const router = useRouter()

// 微前端的信息
const currentMicroAppConfig = config.microAppList.find(c => c.name === route.name)
// 加载微前端
const onMicroAppMounted = () => {
    console.log(`${currentMicroAppConfig?.name} mounted`)
    if (router.currentRoute.value.fullPath === '/fpi-child/') {
        setTimeout(() => {
            router.push({
                path: '/fpi-child/MajorGuarantee',
            })
        }, 600)
    }
}
// 卸载应用
const onMicroAppUnmount = () => {
    console.log(`${currentMicroAppConfig?.name} Unmount`)
}
// 监听路由，触发子应用的更新
watch(
    () => route.path,
    () => {
        if (
            currentMicroAppConfig &&
            currentMicroAppConfig.baseroute &&
            route.path.includes(currentMicroAppConfig.baseroute)
        ) {
            // 主动触发一次popstate事件
            window.dispatchEvent(new PopStateEvent('popstate', { state: null }))
        }
    },
)
</script>
